<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/jquery-3.2.1.min.js"></script>
    <script>
        function checkTxt() {
            var txt;
            $.ajax({
               url:"/ajax/checkName",  //请求服务器的URL路径
                async:false,// 向服务器发送ajax同步请求
               type:"POST",//提交方式
               data:"name="+$("#userName").val(), // 提交服务器的表单数据
                success:function (info) { // 回调函数，用于处理响应信息,info表示服务器发送给客户端的数据
                    // alert(info);
                    // $("#infoSpan").html(info);
                    txt = info;
                    alert("ajax函数中："+txt);

                    if(info == "ok"){
                        $("#infoSpan").html("可以使用");
                        $("#infoSpan").css({"color":"green"});
                    }
                    else{
                        $("#infoSpan").html("该用户已注册");
                        $("#infoSpan").css({color:"red"});
                    }
                }
            });

            alert("function方法中："+txt);
        }
        
        function checkPost() {
            var txt;

            $.ajaxSetup({
                async:false
            });
            //向服务器发送POST的AJAX请求，第一个参数为URL，
            //第二个参数为表单数据，第三个参数为回调函数，处理响应信息
            $.post("/ajax/checkName","name="+$("#userName").val(),function(info){
                alert("ajax方法："+info);
                txt = info;
            });
            $.ajaxSetup({
                async:true
            });
            alert("函数中方法："+txt);
        }
    </script>
</head>
<body>
    <h2>请填写注册信息</h2>
    用户名：<input type="text" name="userName" id="userName" onblur="checkTxt()">
    <span id="infoSpan"></span>
</body>
</html>